<template>
  <div class="container-box">
    <div class="filter-box">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <template v-for="(column, index) in columns.filter(d => d.isFilter)">
          <el-form-item v-if="column.key === 'cat_id'" :key="index" :label="column.title">
            <el-select v-model="query[column.key]" :placeholder="`请选择${column.title}`" :clearable="column.clearable" style="width: 100%;" @change="handleFilter(column.key, $event)">
              <el-option v-for="item in cateList" :key="item.cat_id" :label="item.cat_name" :value="item.cat_id" />
            </el-select>
          </el-form-item>
          <el-form-item v-else-if="column.key === 'store_house_id'" :key="index" :label="column.title">
            <el-select v-model="query[column.key]" :placeholder="`请选择${column.title}`" :clearable="column.clearable" style="width: 100%;" @change="handleFilter(column.key, $event)">
              <el-option v-for="item in storeHouseList" :key="item.id" :label="item.store_house_name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item v-else :key="index" :label="column.title">
            <el-input v-model="query[column.key]" :placeholder="`请输入${column.title}`" :clearable="column.clearable" @change="handleFilter(column.key, $event)" />
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="table-box">
      <el-table :data="list" stripe :border="true" header-row-class-name="table-header-row">
        <template v-for="(column, index) in columns.filter(d => d.isTable)">
          <el-table-column :key="index" :prop="column.key" :label="column.title">
            <template slot-scope="scope">
              <div v-if="column.key === ''" class="">{{ scope.row[column.key] }}</div>
              <div v-else class="">{{ handleRowResult(column, scope.row) }}</div>
            </template>
          </el-table-column>
          <div :key="'detail'+index" class="stock-detail">
            <div v-for="(child, c) in column.child" :key="c" class="" />
          </div>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { goodsIndex } from '../../api/goods'
export default {
  name: 'Stock',
  data() {
    return {
      columns: [
        // { title: '门店', key: 'store_name', type: 'text', isFilter: true, isTable: false },
        { title: '商品名称', key: 'full_goods_name', type: 'text', isFilter: true, clearable: true, isTable: true },
        { title: '分类名称', key: 'cat_id', type: 'text', isFilter: true, clearable: true, isTable: true },
        { title: '仓库', key: 'store_house_id', type: 'text', isFilter: true, clearable: true, isTable: true },
        { title: '库存', key: 'stock', type: 'text', isFilter: false, isTable: true }
      ],
      list: [],
      query: {}
    };
  },
  computed: {
    cateList() {
      const list = this.$store.getters.category?.data || [];
      console.log('stock--cateList==', list);
      return list
    },
    storeHouseList() {
      const list = this.$store.getters.storeHouseList?.data || [];
      return list
    },
    storeHouseDict() {
      const list = this.$store.getters.storeHouseList?.data || [];
      let storeHouseObj = {};
      list.forEach(d => {
        storeHouseObj[d.id] = d;
      });
      return storeHouseObj;
    },
    goodsCategoryDict() {
      return this.$store.getters.goodsCategoryDict;
    }
  },
  created() {
    this.getData();
    console.log('stock--state.goods.category==', this.$store.state.goods.category);
    console.log('stock--storeHouseList==', this.storeHouseList);
    console.log('goodsCategoryDict==', this.goodsCategoryDict);
  },
  methods: {
    async getData() {
      const { data } = await goodsIndex();
      this.allList = data?.list || [];
      this.list = data?.list || [];
      console.log('stock--this.list==', this.list);
    },
    handleRowResult(item, row) {
      if (item.key === 'stock') {
        // if (row.stock && row.unit_name2 && row.unit_convert !== row.unit_convert2) {
        //   const unitNum = row.stock % row.unit_convert2;
        //   const unitNum2 = Math.floor(row.stock / row.unit_convert2);
        //   let resultValue = '';
        //   if (unitNum2) {
        //     resultValue = `${unitNum2}${row.unit_name2}`;
        //   }
        //   if (unitNum) {
        //     resultValue = resultValue + `${unitNum}${row.unit_name}`;
        //   }
        //   return resultValue;
        //   // return `${unitNum2}${row.unit_name2}${unitNum}${row.unit_name}`
        // }
        // return `${row.stock}${row.unit_name}`
        let storeHouseIds = [];
        if (row.attrValue && row.attrValue.length) {
          storeHouseIds = [...new Set(row.attrValue.map(d => d.store_house_id))];
        }
        console.log('storeHouseIds==', storeHouseIds)
        return '123'

      }
      else if (item.key === 'cat_id') {
        if (this.goodsCategoryDict && this.goodsCategoryDict[row.cat_id]) {
          return this.goodsCategoryDict[row.cat_id].cat_name
        }
        else {
          return row[item.key] || '';
        }
      }
      return row[item.key] || '';
    },
    handleFilter(type, value) {
      if (['full_goods_name', 'goods_name'].includes(type)) {
        if (value) {
          this.list = this.allList.filter(d => {
            const index = d.goods_name.indexOf(value) || d.full_goods_name.indexOf(value)
            return index >= 0;
          })
        }
        else {
          this.list = this.$json.cloneDeep(this.allList)
        }
      }
      else if (type === 'cat_id') {
        this.list = value ? this.allList.filter(d => d.cat_id === value) : this.$json.cloneDeep(this.allList);
      }
      else if (type === 'stock') {
        // this.list = value ? this.allList.filter(d => d.cat_id === value) : this.$json.cloneDeep(this.allList);
      }
      else {
        this.list = this.$json.cloneDeep(this.allList)
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.container-box {
  padding: 20px;
}
</style>
